<template>
  <view v-if="cont.courseName" class="container" :style="theme">
    <view
      class="banner"
      :style="{ backgroundImage: 'url(' + cont.courseImage + ')' }"
      @click="previewImg(cont.courseImage)"
    ></view>
    <!-- #ifdef MP-WEIXIN || MP-QQ -->
    <image
      v-if="cont.videoNumberId"
      class="videoImg"
      :src="imgHost + '/banner_ic_play.png'"
      @click.stop="videoBtn(cont)"
    >
    </image>
    <!-- #endif -->

    <view
      v-if="cont.secKillInfo && cont.secKillInfo.type == '0'"
      class="miaosha"
      :style="{ backgroundImage: 'url(' + imgHost + '/miaosha_bgbg.png)' }"
    >
      <!-- <view class="left">
        <image :src="imgHost + '/ic_miaosha@2x (1).png'"></image>
        <view class="priceCnt f26 cf">
          <text>秒杀价</text>
          <text>¥</text>
          <text>{{ cont.secKillInfo.discountPrice || 0 }}</text>
          <text>¥{{ cont.price || 0 }}</text>
        </view>
      </view> -->
      <view class="left">
        <view class="cnt flex">
          <image :src="imgHost + '/ic_miaosha@2x (1).png'"></image>
          <view v-if="cont.secKillInfo.surplus != '不限制'">
            仅剩{{ cont.secKillInfo.surplus || 0 }}件
          </view>
          <view v-else>不限制</view>
        </view>
        <view class="priceCnt f26 cf mt10">
          <text>秒杀价</text>
          <text>¥</text>
          <text>{{ cont.secKillInfo.discountPrice || 0 }}</text>
          <text>¥{{ cont.price || 0 }}</text>
        </view>
      </view>

      <view class="right">
        <view class="cf f24">
          {{
            cont.secKillInfo.status == "0"
              ? "距活动开始："
              : cont.secKillInfo.status == "1"
              ? "距活动结束："
              : "活动已结束"
          }}
        </view>
        <u-count-down
          :time="cont.secKillInfo.duration * 1000"
          format="DD:HH:mm:ss"
          autoStart
          millisecond
          @change="onChange"
          @finish="getDetail"
        >
          <view class="time">
            <text
              v-if="timeData.days && timeData.days > 0"
              class="time__item"
              >{{ timeData.days }}</text
            >
            <text v-if="timeData.days && timeData.days > 0" class="jg">天</text>
            <text class="time__item">{{
              timeData.hours >= 10 ? timeData.hours : "0" + timeData.hours
            }}</text>
            <text class="jg">:</text>
            <text class="time__item">{{ timeData.minutes }}</text>
            <text class="jg">:</text>
            <text class="time__item">{{ timeData.seconds }}</text>
          </view>
        </u-count-down>
      </view>
    </view>
    <view
      v-if="cont.secKillInfo && cont.secKillInfo.type == '1'"
      class="zhekou"
      :style="{ backgroundImage: 'url(' + imgHost + '/bg_zhekou@2x.png)' }"
    >
      <image :src="imgHost + '/ic_hekou@2x.png'" class="left"></image>
      <view class="priceCnt cf">
        <view>
          <text>¥</text>
          <text>{{ cont.secKillInfo.discountPrice || 0 }}</text>
        </view>
        <view>原价 ¥{{ cont.price || 0 }}</view>
      </view>
      <view class="right">
        <view class="cf f24">
          {{
            cont.secKillInfo.status == "0"
              ? "距活动开始："
              : cont.secKillInfo.status == "1"
              ? "距活动结束："
              : "活动已结束"
          }}
        </view>
        <u-count-down
          :time="cont.secKillInfo.duration * 1000"
          format="DD:HH:mm:ss"
          autoStart
          millisecond
          @change="onChange"
          @finish="getDetail"
        >
          <view class="time">
            <text
              v-if="timeData.days && timeData.days > 0"
              class="time__item"
              >{{ timeData.days }}</text
            >
            <text v-if="timeData.days && timeData.days > 0" class="jg">天</text>
            <text class="time__item">{{
              timeData.hours >= 10 ? timeData.hours : "0" + timeData.hours
            }}</text>
            <text class="jg">:</text>
            <text class="time__item">{{ timeData.minutes }}</text>
            <text class="jg">:</text>
            <text class="time__item">{{ timeData.seconds }}</text>
          </view>
        </u-count-down>
      </view>
    </view>
    <view
      class="head card"
      :class="
        cont.secKillInfo && cont.secKillInfo.type == '0'
          ? 'ms'
          : cont.secKillInfo && cont.secKillInfo.type == '1'
          ? 'zk'
          : ''
      "
    >
      <view class="head-cont">
        <view class="title" :class="cont.courseType == '1' ? '' : 'lv'">
          <text>{{
            cont.courseType == "1"
              ? "团体课"
              : cont.courseType == "4"
              ? "私教课"
              : "长期课"
          }}</text>
          <view>{{ cont.courseName }}</view>
        </view>
        <view class="money">
          <view class="price flex">
            <view v-if="cont.price && cont.price > 0" class="je"
              >¥<text class="fwb">{{ cont.price }}</text
              ><text
                v-if="cont.price && cont.price > 0 && cont.courseType == '4'"
                class="f22 c6 ml05"
                >起</text
              >
            </view>
            <view v-else class="green">免费</view>
            <view class="ks">
              <text>{{
                cont.courseType == "4"
                  ? formatSeconds(cont.duration)
                  : cont.classNum
                  ? cont.classNum
                  : 0
              }}</text
              >{{ cont.courseType == "4" ? "" : "课时" }}
            </view>
            <view v-if="cont.courseType == '4'" class="lx">{{
              cont.classType == 1 ? "一对多" : "一对一"
            }}</view>
          </view>
        </view>
        <block v-if="cont.courseType == '4'">
          <view v-if="cont.beginDate" class="info"
            >上课时间：{{ cont.beginDate }}</view
          >
          <view class="info">上课地点：{{ cont.site }}</view>
        </block>

        <view v-if="cont.courseType != '4' && cont.introduction" class="info">{{
          cont.introduction
        }}</view>
      </view>
    </view>
    <block v-if="shopHome == 1 && cont.venue">
      <view class="shopVenueDetail flex mb2" @click="tzVenDetail(cont.venue)">
        <image
          :src="
            cont.venue && cont.venue.logo
              ? cont.venue.logo
              : imgHost + '/default_changguan.jpg'
          "
          class="venImg"
        ></image>
        <view class="venDetail flex flex_between">
          <view class="venDetailLeft">
            <view class="f30 c2 fw5">
              {{ cont.venue.venueName }}
            </view>
            <view class="f26 c9" style="margin-top: 2rpx">
              {{ cont.venue.address }}
            </view>
          </view>
          <u-icon name="arrow-right" color="#999999" size="32rpx"></u-icon>
        </view>
      </view>
    </block>
    <block v-if="cont.courseType == '4'">
      <view v-if="cont.teacherInfo && cont.teacherInfo.length > 0" class="card">
        <view class="bt">选择教练</view>
        <scroll-view
          v-if="cont.teacherInfo && cont.teacherInfo.length > 0"
          scroll-x
          class="teacherTab"
        >
          <view
            v-for="(item, index) in cont.teacherInfo"
            :key="index"
            class="li"
            :class="teacherIndex === index ? 'on' : ''"
            @click="teacherIndex = index"
          >
            <image
              :src="item.teacherImg ? item.teacherImg : imgHost + '/user.png'"
            ></image>
            <view class="name">{{ item.teacherName }}</view>
            <view class="lx">{{ item.teacherLevel || "" }}</view>
            <view class="num">{{ item.bookableCount || 0 }}个时间段可约</view>
          </view>
        </scroll-view>
      </view>
      <view
        v-if="cont.teacherInfo && cont.teacherInfo.length == 1"
        class="coach"
        style="padding: 30rpx"
      >
        <image
          :src="
            cont.teacherInfo[0].teacherImg
              ? cont.teacherInfo[0].teacherImg
              : imgHost + '/user.png'
          "
        />
        <view class="coach-right">
          <view class="name"
            >{{ cont.teacherInfo[0].teacherName
            }}<text v-if="cont.teacherInfo[0].teacherLevel">{{
              cont.teacherInfo[0].teacherLevel
            }}</text></view
          >
          <view class="ks"
            ><text>{{ cont.teacherInfo[0].bookableCount || 0 }}</text
            >个时间段可约</view
          >
        </view>
      </view>
    </block>
    <view v-if="cont.courseType != '4'" class="card">
      <view class="bt">课程信息</view>
      <view
        v-if="cont.teacherInfo && cont.teacherInfo.length == 1"
        class="coach cg"
      >
        <image
          :src="
            cont.teacherInfo[0].teacherImg
              ? cont.teacherInfo[0].teacherImg
              : imgHost + '/user.png'
          "
        />
        <view class="coach-right">
          <view class="name"
            >{{ cont.teacherInfo[0].teacherName
            }}<text v-if="cont.teacherInfo[0].teacherLevel">{{
              cont.teacherInfo[0].teacherLevel
            }}</text></view
          >
          <view class="ks"
            >累计<text>{{ cont.teacherInfo[0].allClassTime || 0 }}</text
            >课时</view
          >
        </view>
      </view>
      <view class="label" v-if="cont.beginDate">
        <view class="label-left">开课日期</view>
        <view class="label-right">{{ cont.beginDate }}</view>
      </view>
      <view class="label" v-if="cont.courseEndDate">
        <view class="label-left">结课日期</view>
        <view class="label-right">{{ cont.courseEndDate }}</view>
      </view>
      <!-- 	<view class="label">
				<view class="label-left">有效期</view>
				<view class="label-right">
					{{ cont.termNum && cont.termType ?cont.termNum:'' }}{{ cont.termNum && cont.termType && cont.termType == "0" ? '年': cont.termNum && cont.termType && cont.termType == "1" ? '月': cont.termNum && cont.termType && cont.termType == "2" ? '日':'无' }}
				</view>
			</view> -->
      <view class="label" v-if="cont.endTime">
        <view class="label-left">报名截止</view>
        <view class="label-right">{{ cont.endTime }}</view>
      </view>
      <!-- <view class="label">
				<view class="label-left">课程类型：</view>
				<view class="label-right">{{cont.courseItem}}</view>
			</view> -->
      <view class="label">
        <view class="label-left">报名人员：</view>
        <view class="label-right"
          ><text v-if="cont.numLimit == 2"
            >限{{ cont.peopleNumLow }}～{{ cont.peopleNumUp }}人</text
          ><text v-else>不限制</text>｜已报名<text class="redColor">{{
            cont.peopleNum
          }}</text
          >人</view
        >
      </view>
      <view class="label">
        <view class="label-left">上课地点：</view>
        <view class="label-right">{{ cont.site }}</view>
      </view>
    </view>
    <view class="card">
      <view class="bt">课程详情</view>
      <u-parse :content="cont.des"></u-parse>
    </view>
    <!-- <view v-if="type == 0" class="bottomState flex-cb">
			<view class="f28 cDD5040 flex-cc" @click="jump('/pages/index/index','', 1)">
				<image
					:src="renovationInfo.navigationList && renovationInfo.navigationList.length > 0?renovationInfo.navigationList[0].iconSelected:imgHost+'/nav_home_sel.png'">
				</image>
				<view>首页</view>
			</view>
			<view class="flex-left">
				#ifdef MP 
				<button class='share' open-type="share">分享好友</button>
				#ifdef H5
				<button class='share' open-type="share" @click="shareBtn">分享好友</button>
				<view v-if="cont.status=='2' && cont.courseType!='4'" class="registerNow"
					@click="jump2('/pages/curriculum/signup?id=', id)">
					立即报名</view>
				<view v-if="cont.status=='2' && cont.courseType=='4'" class="registerNow"
					style="padding-left: 62rpx;padding-right: 62rpx;" @click="yyBtn">
					预约</view>
			</view>
		</view> -->
    <view class="box_active_footer">
      <view class="left">
        <view class="hj">
          <text>合计：</text>
          <block>
            <text
              v-if="
                cont.secKillInfo &&
                (cont.secKillInfo.surplus == '不限制' ||
                  cont.secKillInfo.surplus > 0)
              "
              class="fh"
              >{{
                cont.secKillInfo.discountPrice &&
                Number(cont.secKillInfo.discountPrice) > 0
                  ? "¥"
                  : ""
              }}</text
            >
            <text v-else class="fh">{{
              cont.price && Number(cont.price) > 0 ? "¥" : ""
            }}</text>
          </block>
          <block>
            <text
              v-if="
                cont.secKillInfo &&
                (cont.secKillInfo.surplus == '不限制' ||
                  cont.secKillInfo.surplus > 0)
              "
              class="price"
              :class="cont.secKillInfo.discountPrice ? '' : 'green f28i'"
              >{{ cont.secKillInfo.discountPrice || "免费" }}</text
            >
            <text
              v-else
              class="price"
              :class="cont.price && Number(cont.price) > 0 ? '' : 'green f28i'"
              >{{
                cont.price && Number(cont.price) > 0 ? cont.price : "免费"
              }}</text
            >
          </block>
        </view>
        <view
          v-if="
            cont.secKillInfo &&
            (cont.secKillInfo.surplus == '不限制' ||
              cont.secKillInfo.surplus > 0)
          "
          class="yj"
        >
          原价<text
            :class="cont.price && Number(cont.price) > 0 ? '' : 'green f28i'"
            >{{
              cont.price && Number(cont.price) > 0 ? cont.price : "免费"
            }}</text
          >
        </view>
      </view>
      <view class="right">
        <view
          v-if="
            cont.secKillInfo &&
            cont.status == '2' &&
            cont.courseType != '4' &&
            (cont.secKillInfo.status == '0' ||
              (cont.secKillInfo.status == '1' && cont.secKillInfo.surplus == 0))
          "
          class="yjBtn"
          @click="jump2('/pages/curriculum/signup?id=', id)"
          ><text>原价报名</text></view
        >
        <view
          v-if="
            cont.secKillInfo &&
            cont.status == '2' &&
            cont.courseType == '4' &&
            (cont.secKillInfo.status == '0' ||
              (cont.secKillInfo.status == '1' && cont.secKillInfo.surplus == 0))
          "
          class="yjBtn"
          @click="yyBtn(0)"
          ><text>原价预约</text></view
        >
        <view
          v-if="
            cont.secKillInfo &&
            cont.secKillInfo.isNotify == '0' &&
            cont.secKillInfo.status == '0'
          "
          class="dyBtn on"
          @click="$noMultipleClicks(dyBtn)"
        >
          开抢提醒
        </view>
        <view
          v-if="
            cont.secKillInfo &&
            cont.secKillInfo.isNotify == '1' &&
            cont.secKillInfo.status == '0'
          "
          class="dyBtn hui"
        >
          已设置提醒
        </view>
        <view
          v-if="
            cont.secKillInfo &&
            (cont.secKillInfo.surplus == '不限制' ||
              cont.secKillInfo.surplus > 0) &&
            cont.secKillInfo.status == '1' &&
            cont.status == '2' &&
            cont.courseType != '4'
          "
          class="qgBtn"
          @click="jump2('/pages/curriculum/signup?isJoin=1&id=', id)"
          ><text>立即抢购</text></view
        >
        <view
          v-if="
            cont.secKillInfo &&
            (cont.secKillInfo.surplus == '不限制' ||
              cont.secKillInfo.surplus > 0) &&
            cont.secKillInfo.status == '1' &&
            cont.status == '2' &&
            cont.courseType == '4'
          "
          class="qgBtn"
          @click="yyBtn(1)"
          ><text>立即预约</text></view
        >
        <view
          v-if="
            cont.secKillInfo &&
            cont.secKillInfo.surplus != '不限制' &&
            cont.secKillInfo.status == '1' &&
            cont.secKillInfo.surplus == 0
          "
          class="qgBtn hui"
          ><text>抢光了</text></view
        >
        <view
          v-if="
            (!cont.secKillInfo || cont.secKillInfo.status == '2') &&
            cont.status == '2' &&
            cont.courseType != '4'
          "
          class="gmBtn"
          @click="jump2('/pages/curriculum/signup?id=', id)"
        >
          立即报名</view
        >
        <view
          v-if="
            (!cont.secKillInfo || cont.secKillInfo.status == '2') &&
            cont.status == '2' &&
            cont.courseType == '4'
          "
          class="gmBtn"
          @click="yyBtn(0)"
        >
          立即预约</view
        >
      </view>
    </view>
    <u-popup
      :show="showPops"
      round
      custom-style="background: none"
      mode="top"
      overlayOpacity="0.7"
    >
      <view class="fxpop popcnt flex-cc">
        <image :src="imgHost + '/ic_tip.png'" class="img1"></image>
        <image
          :src="imgHost + '/btn_tip.png'"
          class="img2"
          @click="showPops = false"
        ></image>
      </view>
    </u-popup>
  </view>
</template>
<script>
// #ifdef H5
import wx from "@/common/jweixin.js";
// #endif
import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      noClick: true,
      id: "",
      teacherIndex: 0,
      showPops: false,
      cont: {},
      teacherId: [],
      type: 0,
      time: 108000000,
      timeData: {},
    };
  },
  computed: mapState(["renovationInfo"]),
  onLoad(ops) {
    uni.showShareMenu({
      withShareTicket: true,
      menus: ["shareAppMessage", "shareTimeline"],
    });
    this.id = ops.id;
    this.type = ops.type || 0;
    if (ops.teacherId) {
      this.teacherId = JSON.parse(decodeURIComponent(ops.teacherId));
    }
    if (ops.venueId) {
      this.$store.commit("setVenueId", ops.venueId);
    }
    setTimeout(() => {
      this.getDetail();
    }, 500);
  },
  onShareAppMessage(e) {
    let that = this;
    if (this.cont && this.cont.secKillInfo && this.cont.secKillInfo.imageUrl) {
      return {
        imageUrl: this.cont.secKillInfo.imageUrl,
      };
    } else {
      return {
        title: "课程详情",
        path: `/pages/curriculum/detail?id=${that.id}&type=${that.type}&teacherId=${that.teacherId}&venueId=${that.venueId}`,
      };
    }
  },
  onShareTimeline() {
    let that = this;
    if (this.cont && this.cont.secKillInfo && this.cont.secKillInfo.imageUrl) {
      return {
        imageUrl: this.cont.secKillInfo.imageUrl,
      };
    } else {
      return {
        title: "课程详情",
        path: `/pages/curriculum/detail?id=${that.id}&type=${that.type}&teacherId=${that.teacherId}`,
      };
    }
  },
  methods: {
    jump(url, params, a) {
      this.$app.jump(url, params, a);
    },
    jump2(url, params, a) {
      this.$app.jump2(url, params, a);
    },
    jump3(url, params, a) {
      this.$app.jump3(url, params, a);
    },
    tzVenDetail(item) {
      this.$store.commit("setVenueName", item.venueName);
      this.$store.commit("setVenueId", item.venueId);
      this.jump3("/pages/venue/indexShop?id=", item.venueId);
    },
    dyBtn() {
      this.$app
        .ajax({
          api: this.$api.addSecNotify(),
          data: {
            param: {
              id: this.cont.secKillInfo.id,
            },
          },
        })
        .then((res) => {
          if (res.errorCode === "000000") {
            this.$app.showToast("订阅成功");
            this.getDetail();
          }
        })
        .catch(() => {});
    },
    videoBtn(item) {
      console.log("弹出1次");
      var that = this;
      wx.openChannelsActivity({
        finderUserName: item.videoNumberId,
        feedId: item.videoId,
        success(res) {
          console.log("成功3", res);
        },
        fail(err) {
          console.log("取消3?", err);
        },
      });
      // wx.getChannelsLiveInfo({
      // 	finderUserName: item.videoNumberId,
      // 	success(res) {
      // 		console.log('成功', res)
      // 	},
      // 	fail(err) {
      // 		console.log('取消?', err)
      // 	}
      // });
      // wx.openChannelsLive({
      // 	finderUserName: item.videoNumberId,
      // 	success(res) {
      // 		console.log('成功1', res)
      // 	},
      // 	fail(err) {
      // 		console.log('取消1?', err)
      // 	}
      // });
    },
    submitForm() {
      let that = this;
      // #ifdef MP-WEIXIN
      uni.requestSubscribeMessage({
        tmplIds: ["XXXXXXXXXXX"], //这里填写tempid
        success: function (subscribeMessageRes) {
          if (subscribeMessageRes.errMsg == "requestSubscribeMessage:ok") {
            that.dySuccess();
          }
        },
        fail: function () {},
      });
      // #endif
    },
    dySuccess() {},
    onChange(e) {
      this.timeData = e;
    },
    formatSeconds(e) {
      return this.$app.formatSeconds(e);
    },
    //单张图片预览
    previewImg(imgurl) {
      let _this = this;
      let imgsArray = [];
      imgsArray[0] = imgurl;
      uni.previewImage({
        current: 0,
        urls: imgsArray,
      });
    },
    yyBtn(isJoin) {
      let classType = this.cont.classType;
      let duration = this.cont.duration;
      let teacherId = this.cont.teacherInfo[this.teacherIndex].teacherId;
      this.jump2(
        "/pages/curriculum/reservation?id=",
        this.id +
          "&teacherId=" +
          teacherId +
          "&duration=" +
          duration +
          "&classType=" +
          classType +
          "&isJoin=" +
          isJoin
      );
    },
    // 发起获取signature请求
    getSignature() {
      var url = location.href.split("#")[0];
      this.$app
        .ajax({
          data: {
            param: {
              path: url,
            },
          },
          api: this.$api.wxpConfig(),
        })
        .then((res) => {
          if (res.errorCode === "000000") {
            this.setShare(res.record);
          }
        })
        .catch(() => {});
    },
    // 设置分享数据
    setShare(signature) {
      let that = this;
      var url = location.href.split("?")[0];
      uni.setStorageSync("signature", JSON.stringify(signature));

      wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        // 配置微信 JSSDK
        appId: signature.appId, // 必填，公众号的唯一标识
        timestamp: signature.timestamp, // 必填，生成签名的时间戳
        nonceStr: signature.nonceStr, // 必填，生成签名的随机串
        signature: signature.signature, // 必填，签名
        jsApiList: [
          "scanQRCode",
          "checkJsApi",
          "chooseImage",
          "updateAppMessageShareData",
          "updateTimelineShareData",
        ],
      });

      wx.ready(function () {
        console.log("这是分享功能");
        wx.updateAppMessageShareData({
          imgUrl: that.cont.courseImage, // 分享图标
          title: that.cont.courseName, // 分享标题
          desc: that.cont.introduction, // 分享描述
          link: url + "?id=" + that.id, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          success: function () {
            console.log("我来分享了");
          },
        });
        wx.updateTimelineShareData({
          imgUrl: that.cont.courseImage, // 分享图标
          title: that.cont.courseName, // 分享标题
          desc: that.cont.introduction, // 分享描述
          link: url + "?id=" + that.id, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          success: function () {
            console.log("我来分享了");
          },
        });
      });
      wx.error((res) => {
        console.log(res);
        // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
        // that.getSignature()
      });
    },
    //分享
    shareBtn(e) {
      if (e != 1) {
        this.showPops = true;
      }
      const _signature = uni.getStorageSync("signature");
      // 先看看缓存里有没有
      if (_signature) {
        let signature = JSON.parse(_signature);
        // 获取当前时间戳
        var now = parseInt(new Date().getTime() / 1000) + "";
        // 计算两个时间戳之间的差值，单位为秒
        var diff = now - signature.expire_time;

        // 判断差值是否大于2小时的秒数，即7200秒
        if (diff > 7200) {
          console.log("时间戳已经超过两小时。");
          this.getSignature();
        } else {
          console.log("时间戳未超过两小时。");
          this.setShare(signature);
        }
      } else {
        this.getSignature();
      }
    },
    share() {
      let summary = this.info.introduction;
      uni.share({
        provider: "weixin",
        scene: "WXSceneSession",
        title: "课程分享",
        summary: summary, // 分享内容文字
        success: function () {
          // 此处是调起微信分享成功的回调
        },
        fail: function () {
          // 此处是调起微信分享失败的回调
        },
      });
    },
    getDetail() {
      this.$app
        .ajax({
          api: this.$api.infoCourseMini(),
          data: {
            userId: this.userInfo.id,
            param: {
              courseId: this.id,
              // teacherIds: this.teacherId
            },
          },
        })
        .then((res) => {
          if (res.errorCode === "000000") {
            let obj = res.record;
            // obj.secKillInfo = {
            // 	"id": 1,
            // 	"type": "0",
            // 	"status": "1",
            // 	"discountPrice": 10,
            // 	"surplus": "不限制",
            // 	"duration": 1866422,
            // 	"isNotify": "1"
            // }
            this.cont = obj;
            // this.shareBtn(1)
          } else {
            setTimeout(() => {
              uni.navigateBack({
                delta: 1,
              });
            }, 500);
          }
        })
        .catch(() => {});
    },
  },
};
</script>
<style scoped lang="scss">
.container {
  padding-bottom: 120rpx;
}

.banner {
  width: 100%;
  height: 388rpx;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.card {
  background-color: #ffff;
  margin-bottom: 24rpx;
  width: 690rpx;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  padding: 30rpx;
  background-color: #fff;
  border-radius: 8rpx;

  .bt {
    font-size: 34rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #222222;
    margin-bottom: 30rpx;
  }
}

.head {
  margin-top: -30rpx;

  &.ms {
    margin-top: -70rpx;
  }
  .head-cont {
    .title {
      font-size: 36rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #222222;
      display: flex;
      align-items: center;

      text {
        height: 40rpx;
        line-height: 40rpx;
        background: $color;
        border-radius: 8rpx;
        display: inline-block;
        padding: 0 10rpx;
        margin-right: 20rpx;
        font-size: 22rpx;
        color: #ffff;
      }
    }

    .info {
      font-size: 28rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #666666;
      margin-top: 15rpx;
      line-height: 1.5;
    }

    .money {
      margin-top: 15rpx;

      .price {
        font-size: 28rpx;

        .je {
          font-size: 36rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: $red;
        }

        .ks {
          font-size: 22rpx;
          color: #666666;
          margin-left: 18rpx;
          padding-left: 18rpx;
          border-left: 1px solid #e5e5e5;
          height: 28rpx;
          line-height: 28rpx;

          text {
            font-size: 30rpx;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #333333;
          }
        }

        .lx {
          font-size: 26rpx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #333333;
          margin-left: 18rpx;
          padding-left: 18rpx;
          border-left: 1px solid #e5e5e5;
          height: 28rpx;
          line-height: 28rpx;
        }
      }
    }
  }
}

.coach {
  background: #ffffff;
  border-radius: 8rpx;
  box-sizing: border-box;
  padding-bottom: 30rpx;
  width: 690rpx;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  margin-bottom: 30rpx;

  &.cg {
    width: 100%;
    border-bottom: 1px solid #eeeeee;
  }

  image {
    width: 84rpx;
    height: 84rpx;
    border-radius: 50%;
    margin-right: 20rpx;
  }

  .coach-right {
    flex: 1;

    .name {
      font-weight: 500;
      color: #222222;
      font-size: 30rpx;
      margin-bottom: 12rpx;
      line-height: 1.5;

      text {
        color: $color;
        font-size: 22rpx;
        line-height: 32rpx;
        padding: 0 10rpx;
        border-radius: 4rpx;
        border: 1px solid $color;
        margin-left: 16rpx;
      }
    }

    .ks {
      font-size: 26rpx;
      line-height: 1.5;
      font-weight: 400;
      color: #999;
    }
  }
}

.label {
  display: flex;
  margin-top: 20rpx;
  line-height: 1.5;
  font-size: 28rpx;
  font-weight: 400;
  color: #222222;

  .label-left {
    color: #666666;
    display: inline-block;
    width: 5em;
  }

  .label-right {
    flex: 1;
  }
}

.bmry {
  display: flex;
  flex-wrap: wrap;
}

.peopleList {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.headPortrait {
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
}

.bottomState {
  width: 100%;
  padding: 16rpx 30rpx;
  background-color: #fff;
  position: fixed;
  z-index: 99999;
  bottom: 0;
  box-sizing: border-box;
  overflow: hidden;
}

.bottomState .flex-cc {
  width: 100rpx;
  flex-direction: column;
}

.bottomState .flex-cc image {
  width: 44rpx;
  height: 44rpx;
}

.share {
  height: 68rpx;
  padding: 0 34rpx;
  color: $color;
  border: 1px solid $color;
  background-color: #fff;
  font-size: 28rpx;
  border-radius: 34rpx;
  line-height: 68rpx;
}

.registerNow {
  height: 68rpx;
  padding: 0 34rpx;
  color: #fff;
  background-color: $color;
  font-size: 28rpx;
  border-radius: 34rpx;
  line-height: 68rpx;
  margin-left: 20rpx;
}

.cancel {
  height: 68rpx;
  padding: 0 34rpx;
  color: #666666;
  border: 1px solid #999999;
  font-size: 28rpx;
  border-radius: 34rpx;
  line-height: 68rpx;
}

.finishedColor {
  background: #cccccc;
}

.teacherTab {
  white-space: nowrap;
  display: flex;
  width: 100%;

  .li {
    text-align: center;
    display: inline-block;
    margin-right: 20rpx;
    width: 216rpx;
    height: 266rpx;
    padding-top: 24rpx;
    box-sizing: border-box;
    background: $bjColor;
    border: 1rpx solid $bjColor;
    border-radius: 8rpx;
    position: relative;
    overflow: hidden;

    &:last-of-type {
      margin-right: 0;
    }

    image {
      width: 80rpx;
      height: 80rpx;
      border: 1rpx solid $bjColor;
    }

    view {
      line-height: 1.2;
      margin-top: 8rpx;
      font-size: 30rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
    }

    .name {
      color: #333333;
    }

    .lx {
      font-size: 26rpx;
      color: $color;
    }

    .num {
      color: #999999;
      font-size: 26rpx;
    }

    &.on {
      border-color: $color;
      background: #fff;

      &:before {
        content: "";
        position: absolute;
        right: 0;
        top: 0;
        border: 32rpx solid $color;
        border-bottom-color: transparent;
        border-left-color: transparent;
      }

      &:after {
        content: "";
        width: 5rpx;
        height: 12rpx;
        position: absolute;
        right: 12rpx;
        top: 10rpx;
        border: 2px solid #fff;
        border-top-color: transparent;
        border-left-color: transparent;
        transform: rotate(45deg);
      }
    }
  }
}

.miaosha {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  width: 100%;
  height: 220rpx;
  box-sizing: border-box;
  padding: 16rpx 30rpx 0 28rpx;
  display: flex;
  justify-content: space-between;

  .left {
    .cnt {
      image {
        width: 210rpx;
        height: 50rpx;
      }

      view {
        font-size: 24rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #fe2c2e;
        padding: 0 8rpx;
        line-height: 42rpx;
        background: #ffffff;
        position: relative;
        border-radius: 8rpx;
        margin-left: 18rpx;

        &::before {
          position: absolute;
          content: "";
          width: 0;
          height: 0;
          top: 11rpx;
          left: -10rpx;
          border-top: 10rpx solid transparent;
          border-right: 10rpx solid #fff;
          border-bottom: 10rpx solid transparent;
        }
      }
    }
    image {
      width: 210rpx;
      height: 50rpx;
      display: block;
    }

    .priceCnt {
      line-height: 50rpx;

      text {
        display: inline-block;

        &:nth-of-type(2) {
          margin-left: 4rpx;
        }

        &:nth-of-type(3) {
          font-size: 48rpx;
          font-weight: bolder;
        }

        &:nth-of-type(4) {
          margin-left: 8rpx;
          text-decoration: line-through;
          color: rgba(255, 222, 222, 1);
        }
      }
    }
  }

  .right {
    text-align: right;
    box-sizing: border-box;
    padding-top: 22rpx;

    .f24 {
      margin-bottom: 10rpx;
    }

    .time {
      font-size: 22rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      color: #fff;

      text {
        display: inline-block;

        &.jg {
          margin: 0 8rpx;
        }

        &.time__item {
          width: 44rpx;
          height: 44rpx;
          text-align: center;
          line-height: 44rpx;
          background: #fff;
          border-radius: 16rpx;
          font-size: 26rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: Medium;
          color: #fe2c2e;
        }
      }
    }
  }
}

.footCnt {
  background: #ffffff;
  box-shadow: 0rpx -1rpx 0rpx 0rpx #eeeeee;
  box-sizing: border-box;
  position: fixed;
  z-index: 99;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  padding: 20rpx 30rpx;

  .left {
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .hj {
      text {
        color: #fe2c2e;

        &:nth-of-type(1) {
          font-size: 28rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          color: #333333;
          width: 90rpx;
        }

        &:nth-of-type(2) {
          font-size: 24rpx;
        }

        &:nth-of-type(3) {
          font-weight: bolder;
          font-size: 36rpx;
        }
      }
    }

    .yj {
      padding-left: 90rpx;
      text-decoration: line-through;
      font-size: 24rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      color: #999999;
    }
  }

  .right {
    view {
      &:nth-of-type(2) {
        margin-left: 20rpx;
      }
    }
    .btn {
      font-size: 30rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: Medium;
      color: #ffffff;
      width: 200rpx;
      height: 80rpx;
      background: linear-gradient(270deg, #fe2c2e 0%, #ff6a1f 100%);
      border-radius: 40rpx;
      line-height: 80rpx;
      text-align: center;
      &.hui {
        opacity: 0.5;
      }
    }
    .btns {
      font-size: 30rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: Medium;
      color: #ffffff;
      width: 200rpx;
      height: 80rpx;
      background: #ff6a1f;
      border-radius: 40rpx;
      line-height: 80rpx;
      text-align: center;
    }
  }
}
.zhekou {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  width: 690rpx;
  height: 160rpx;
  margin: 20rpx auto 0;
  box-sizing: border-box;
  padding: 24rpx;
  display: flex;
  justify-content: space-between;

  .left {
    width: 68rpx;
    height: 68rpx;
    padding-right: 26rpx;
    flex: none;
    margin-right: 26rpx;
    border-right: 1px solid rgba(255, 255, 255, 0.26);
  }
  .priceCnt {
    flex: 1;
    view {
      line-height: 40rpx;
      text {
        display: inline-block;
        color: #fff;
        &:nth-of-type(1) {
          font-size: 26rpx;
        }

        &:nth-of-type(2) {
          font-size: 36rpx;
          font-weight: bolder;
          margin-left: 10rpx;
        }
      }
      &:nth-of-type(2) {
        line-height: 30rpx;
        font-size: 24rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        text-decoration: line-through;
        color: #ffdede;
      }
    }
  }

  .right {
    text-align: right;
    box-sizing: border-box;
    .f24 {
      margin-bottom: 10rpx;
      line-height: 1;
    }

    .time {
      font-size: 22rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      color: #fff;

      text {
        display: inline-block;

        &.jg {
          margin: 0 8rpx;
        }

        &.time__item {
          width: 44rpx;
          height: 44rpx;
          text-align: center;
          line-height: 44rpx;
          background: #fff;
          border-radius: 16rpx;
          font-size: 26rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: Medium;
          color: #fe2c2e;
        }
      }
    }
  }
}
.videoImg {
  position: absolute;
  width: 60rpx;
  height: 60rpx;
  top: 274rpx;
  right: 24rpx;
}
.box_active_footer {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  background: #ffffff;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99;
  .left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 80rpx;

    .hj {
      text {
        color: #fe2c2e;

        &:nth-of-type(1) {
          font-size: 28rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          color: #333333;
          width: 90rpx;
        }

        &.fh {
          font-size: 24rpx;
        }

        &.price {
          font-weight: bolder;
          font-size: 36rpx;
        }
      }
    }

    .yj {
      padding-left: 90rpx;
      text-decoration: line-through;
      font-size: 24rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      color: #999999;
    }
  }

  .right {
    display: flex;
    justify-content: flex-end;
    flex: 1;
    view {
      margin-left: 20rpx;
    }
    .gmBtn {
      flex: none;
      background: $color;
      color: #fff;
      width: 200rpx;
      height: 80rpx;
      border-radius: 40rpx;
      line-height: 80rpx;
      text-align: center;
      font-size: 30rpx;
    }

    .qgBtn {
      flex: none;
      background: $color;
      color: #fff;
      width: 200rpx;
      height: 80rpx;
      background: linear-gradient(270deg, #fe2c2e 0%, #ff6a1f 100%);
      border-radius: 40rpx;
      line-height: 80rpx;
      text-align: center;
      font-size: 30rpx;

      &.hui {
        opacity: 0.5;
      }
    }
    .dyBtn {
      font-size: 30rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: Medium;
      color: #ffffff;
      width: 200rpx;
      height: 80rpx;
      background: linear-gradient(270deg, #fe2c2e 0%, #ff6a1f 100%);
      border-radius: 40rpx;
      line-height: 80rpx;
      text-align: center;
      &.hui {
        opacity: 0.5;
      }
      &.on {
        -webkit-animation-name: scaleDraw; /*关键帧名称*/
        -webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/
        -webkit-animation-iteration-count: infinite; /*动画播放的次数*/
        -webkit-animation-duration: 5s; /*动画所花费的时间*/
      }
    }
    .yjBtn {
      font-size: 30rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: Medium;
      color: #ffffff;
      width: 200rpx;
      height: 80rpx;
      background: linear-gradient(270deg, #fea82c 0%, #ffd34d 100%);
      border-radius: 40rpx;
      line-height: 80rpx;
      text-align: center;
    }
  }
}
</style>